<script setup>
import { ref } from 'vue'
import ClusterNamespaceSelector from './ClusterNamespaceSelector.vue';
const props = defineProps({
  // 判断当前是创建还是更新
  showNamespace: {
    type: Boolean,
    default: true
  },
  clusterReadonly: {
    type: Boolean,
    default: false
  },
  namespaceReadonly: {
    type: Boolean,
    default: false
  },
})
const emits = defineEmits(['namespaceChangedRollback','clusterChangedRollback'])
const namespaceRollback = (clusterId, namespace) => {
  emits('namespaceChangedRollback', clusterId, namespace)
}

const clusterChangedRollback = (clusterId) => {
  emits('clusterChangedRollback', clusterId)
}
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="auto-space-between">
        <!-- 左侧 -->
        <div>
            <ClusterNamespaceSelector
            :cluster-readonly="props.clusterReadonly"
            :namespace-readonly="props.namespaceReadonly"
            :show-namespace="props.showNamespace"
            @namespaceChangedRollback="namespaceRollback"
            v-if="props.showNamespace"
            ></ClusterNamespaceSelector>
            <ClusterNamespaceSelector
            v-else
            :cluster-readonly="props.clusterReadonly"
            :show-namespace="props.showNamespace"
            @clusterChangedRollback="clusterChangedRollback"
            ></ClusterNamespaceSelector>
            
            <slot name="header"></slot>
        </div>
        <!-- 右侧 -->
        <div></div>
      </div>
    </template>
    <slot name="main"></slot>
  </el-card>
</template>

<style scoped>

</style>
